<template>
  <el-container>
    <!-- 左侧 -->
    <el-aside width="200px">
      <div style="height:50px;  background-color:#424242;">
        <span class="el-icon-s-goods">Sweet甜品铺</span>
      </div>
      <el-menu
        unique-opened
        router
        @select="selects"
        :default-active="curactive"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#1495e7"
      >
        <div v-for="obj in treelist" :key="obj.index">
          <!-- 可展开的菜单儿子 -->
          <el-submenu v-if="obj.children" :index="obj.index">
            <template slot="title">
              <i :class="obj.i"></i>
              <span>{{ obj.text }}</span>
            </template>

            <!-- 儿子，应该循环当前数据的obj.children数组 -->
            <el-menu-item
              v-for="child in obj.children"
              :key="child.index"
              :index="child.index"
              >{{ child.text }}</el-menu-item
            >
          </el-submenu>
          <!-- 无法展开直接点击的菜单儿子 -->
          <el-menu-item v-else :index="obj.index">
            <i :class="obj.i"></i>
            <span slot="title">{{ obj.text }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </el-aside>
    <!-- 右侧 -->
    <el-container>
      <!-- 右-身 -->
      <el-header
        style="display: flex; justify-content: space-between; padding: 0 20px"
      >
        <div>
          <el-breadcrumb separator="/" style="height:60px;line-height:60px">
            <el-breadcrumb-item v-for="item in breadlist" :key="item">{{
              item
            }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div style="display: flex">
          <p style="line-height: 60px; margin-right: 20px">
            欢迎您,{{ users.account }}
          </p>
          <img @click="imgclick" :src="users.imgUrl" />
        </div>
      </el-header>
      <el-main>
        <el-card class="box-card">
          <router-view></router-view>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { username } from "@/apis/users";
import { bus } from "../utils/utils";
export default {
  data() {
    return {
      breadlist: [],
      users: {},
      treelist: [
        {
          index: "/index/home",
          i: "el-icon-s-home",
          text: "后台首页",
          bread: ["首页"],
        },
        {
          index: "/index/order",
          i: "el-icon-s-order",
          text: "订单管理",
          bread: ["订单管理"],
        },
        {
          index: "//index/home",
          i: "el-icon-s-cooperation",
          text: "商品管理",
          children: [
            {
              index: "/index/commoditylist",
              text: "商品列表",
              bread: ["商品管理", "商品列表"],
            },
            {
              index: "/index/addommodity",
              text: "商品添加",
              bread: ["商品管理", "商品添加"],
            },
            {
              index: "/index/commoditytype",
              text: "商品分类",
              bread: ["商品管理", "商品分类"],
            },
          ],
        },
        {
          index: "/index/administration", 
          i: "el-icon-school",
          text: "店铺管理",
          bread: ["店铺管理"],
        },
        {
          index: "5",
          i: "el-icon-s-custom",
          text: "账号管理",
          children: [
            {
              index: "/index/accountlist",
              text: "账号列表",
              bread: ["账号管理", "账号列表"],
            },
            {
              index: "/index/addaccount",
              text: "添加账号",
              bread: ["账号管理", "添加账号"],
            },
            {
              index: "/index/changepwd",
              text: "修改密码",
              bread: ["账号管理", "修改密码"],
            },
          ],
        },
        {
          index: "6",
          i: "el-icon-pie-chart",
          text: "销售统计",
          children: [
            {
              index: "/index/cmdtatistics",
              text: "商品统计",
              bread: ["销售统计", "商品统计"],
            },
            {
              index: "/index/orderstatistics",
              text: "订单统计",
              bread: ["销售统计", "订单统计"],
            },
          ],
        },
      ],
      curactive: "/index/home",
    };
  },
  created() {
    //判断当用户权限为普通用户则不展示账号管理等
    if (localStorage.role == "normal") {
      this.treelist.splice(2, 3);
    }
    this.curactive = location.pathname;
    let users = JSON.parse(window.localStorage.getItem("user"));
    username({ id: users }).then((res) => {
      this.users = res.data.accountInfo;
    });
    bus.$on("headrefrent", (imgUrl) => {
      this.users.imgUrl = imgUrl;
    });
  },
  methods: {
    imgclick() {
      window.location.pathname = "/index/userinfo";
    },
    selects(index) {
      let bread = [];
      for (const obj of this.treelist) {
          if(obj.children){
            for (const item of obj.children) {
              if(item.index==index){
                bread=item.bread;
              }
            }
          }else{
            if(obj.index==index){
              bread=obj.bread;
            }
          }
      }
    this.breadlist=bread
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/styles/common.less");

.el-menu {
  border: 0;
}
.el-icon-s-goods{
  color: #ccc;
   color:#fff;font-size:22px;
    line-height:50px;
    margin-left:10px;

}
.el-container {
  width: 100%;
  height: 100%;

  .el-aside {
    background-color: @Basecolor3;
  }

  .el-header {
    background-color: @Basecolor2;
    h3 {
      margin: 20px 20px;
    }
  }
  .el-main {
    background: @tintcolor;
    padding: 0.5% 0.5%;
  }
}
img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
</style>